<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Social Mobile</title>
<script>
var chkNative = false;
</script>
<!-- jQuery and jQuery Mobile -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script	src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

<link rel="stylesheet" href="css/mobile-style.css" />
<script type="text/javascript" src="js/social-mobile.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

<style type="text/css">
#frm-login label.error {
	margin-left: 10px;
	width: auto;
	color: red;
}

#newsletter_topics label.error {
	display: none;
	margin-left: 103px;
}

#preview {
	width: 80%;
	max-width: 100px;
}

#preview img {
	width: 100%;
}

.hiddenfile {
	width: 0px;
	height: 0px;
	overflow: hidden;
}
</style>

</head>
<body>
<script>
var currentTab = 1;
var imageSelected = false;
var imageSended = false;

function loadComboYear() {
	var today = new Date();
	year = today.getFullYear()-18;
	for (i = year; i > 1940; i--) {
		$('#nuAge1').append('<option value="'+ i +'">'+ i +'</option>');
		$('#nuAge2').append('<option value="'+ i +'">'+ i +'</option>');
		
	}
	
	$("#nuAge1").selectmenu('refresh', true);
	$("#nuAge2").selectmenu('refresh', true);

}
function changeTab(step) {
	currentTab = step;
	
	if (step != "1") {
		$("#step1").hide();
		$("#tab1").removeClass("ui-btn-active");
	} 
	if (step != "2") {
		$("#step2").hide();
		$("#tab2").removeClass("ui-btn-active");
	} 
	if (step != "3") {
		$("#step3").hide();
		$("#tab3").removeClass("ui-btn-active");
	}
	
	if (step == "2") {
		
		loadComboYear();
		
		form = $('#frm-login');
		nuType				= form.find( 'select[name="nuType"]' ).val();
		if (nuType == 0 || nuType == 1 || nuType == 3 || nuType == 6) {
			$("#user2").show();
		} else {
			$("#user2").hide();
		}
	}
	
	$("#step"+step).show();
	$("#tab"+step).addClass("ui-btn-active");
	
}

$(document).ready(function(){
	
	 $('#step1_av').click(function(event){
		 if (validateForm()) {
		 	changeTab('2');
		 }
	 });
	 
	 $('#step2_av').click(function(event){
		 if (validateForm()) {
		 	changeTab('3');
		 }
	 });	 
	 
	 $('#step2_bk').click(function(event){
		 changeTab('1');
	 });	
	 
	 $('#step3_bk').click(function(event){
		 changeTab('2');
	 });		 
	 
	 

	//validate signup form on keyup and submit
	$("#frm-login").validate({
		rules: {
			dsLogin: "required",
			dsPassword: "required",
			dsLogin: {
				required: true,
				minlength: 5
			},
			dsPassword: {
				required: true,
				minlength: 5
			},
			dsConfPassword: {
				required: true,
				minlength: 5,
				equalTo: "#dsPassword"
			},
			dsName: {
				required: true,
				minlength: 5
			},
			dsEmail: {
				required: true,
				email: true
			},
			nuCrsProfile: {
				digits: true
			},
			dsName1: {
				required: true
			},	
			dsName2: {
				required: true
			}
			
		},
		messages: {
			dsLogin: "Informe um nome de usuário",
			dsLogin: {
				required: "Informe um nome de usuário",
				minlength: "Seu usuário deve ter no mínimo 5 caracteres"
			},
			dsPassword: {
				required: "Informe uma senha",
				minlength: "Seu senha deve ter no mínimo 5 caracteres"
			},
			dsConfPassword: {
				required: "Informe uma senha",
				minlength: "Seu senha deve ter no mínimo 5 caracteres",
				equalTo: "Informe a mesma senha."
			},
			dsName: {
				required: "Informe um apelido.",
				minlength: "Seu apelido deve ter no mínimo 5 caracteres"
			},			
			dsEmail: "Informe um email válido",
			nuCrsProfile: "Informe apenas números. Seu perfil será confirmado.",
			dsName1: "Informe um apelido para o parceiro 1.",
			dsName2: "Informe um apelido para o parceiro 2."
		}
	});	 
	 
	});
</script>
	<!-- Home -->
	<div data-theme="a" data-role="page" id="login-mobile-page">
		<div data-role="content">

			<div align="center">
			<img alt="" src="img/logossw.png">
			<br>
			<img src="img/txtssw.png">
			</div>
			<br><br>
			<i>Para maior segurança e privacidade, apenas usuários convidados terão acesso ao aplicativo.</i> <br>
			<a href="mailto:sswbrmobile@gmail.com">sswbrmobile@gmail.com</a>			
			
			<br><br>
			<form id="frm-login" action="/social-mobile-web/rest/profile/register"  data-ajax="false" enctype="multipart/form-data">
			
			<div data-role="navbar">
				<ul>
					<li><a href="#" id="tab1" class="ui-btn-active" onclick="changeTab('1');">Dados Perfil</a></li>
					<li><a href="#" id="tab2" onclick="changeTab('2');">Usuários</a></li>
					<li><a href="#" id="tab3" onclick="changeTab('3');">Foto</a></li>
				</ul>
			</div><!-- /navbar -->		
			<br><br>
			<div id="msg-display" class="msgError"></div>
			<br><br>
			
			<div style="display: block" id="step1">
			
			<label for="dsLogin">Usuário *</label>
			<div><input name="dsLogin" id="dsLogin" placeholder="" value="" type="text"></div>
			
			<label for="dsPassword">Senha  *</label>
			<div><input name="dsPassword" id="dsPassword" placeholder="" value="" type="password"></div>							
			
			<label for="dsConfPassword">Confirmar Senha  *</label>
			<div><input name="dsConfPassword" id="dsConfPassword" placeholder="" value="" type="password"></div>					
			
			<label for="dsName">Apelido  *</label>
			<div><input name="dsName" id="dsName" placeholder="" value="" type="text"></div>
			
			
			<label for="dsEmail">Email  *</label>
			<div><input name="dsEmail" id="dsEmail" placeholder="" value="" type="text"></div>			

				<label for="nuType" class="select">Tipo do Perfil  *</label>
				<select name="nuType" id="nuType" data-native-menu="false">
					<option value="0">Namorado</option>
					<option value="1">Casado</option>
					<option value="2">Solteiro</option>
					<option value="3">Noivo</option>
					<option value="4">Viúvo</option>
					<option value="5">Separado</option>
					<option value="6">Amantes</option>
				</select>

			
			<label for="dsName">Perfil CRS</label>
			<div><input name="nuCrsProfile" id="nuCrsProfile" placeholder="" value="" type="text"></div>

			<label for="dsName">Perfil Sexlog</label>
			<div><input name="dsSexLog" id="dsSexLog" placeholder="" value="" type="text"></div>


			<br>
			<div style="width:150px"><input id="step1_av" type="button" value="Próximo" data-icon="arrow-r"></div>
			
			</div>
				
			<div style="display: none" id="step2">
				
				<label for="dsName1">Parceiro 1  *</label>
				<div><input name="dsName1" id="dsName1" placeholder="" value="" type="text"></div>
				
				<label for="nuAge1" class="select">Ano Nascimento  *</label>
				<div><select name="nuAge1" id="nuAge1" data-native-menu="false"></select></div>	
				
				<label for="nuGender1" class="select">Sexo  *</label>
				<select name="nuGender1" id="nuGender1" data-native-menu="false">
					<option value="0">Masculino</option>
					<option value="1">Feminino</option>
				</select>
					
				<div style="display: none" id="user2">	
					<br><br>
					<label for="dsName2">Parceiro 2  *</label>
					<div><input name="dsName2" id="dsName2" placeholder="" value="" type="text"></div>
					
					<label for="nuAge2" class="select">Ano Nascimento  *</label>
					<div><select name="nuAge2" id="nuAge2" data-native-menu="false"></select></div>
					
					<label for="nuGender2" class="select">Sexo  *</label>
					<select name="nuGender2" id="nuGender2" data-native-menu="false">
						<option value="0">Masculino</option>
						<option value="1" selected="selected">Feminino</option>
					</select>
				</div>
				<br>
				<div class="ui-grid-step2">
					<div style="width:150px" class="ui-block-a"><input id="step2_bk" type="button" value="Anterior" data-icon="arrow-l"></div>			
					<div style="width:150px" class="ui-block-b"><input id="step2_av" type="button" value="Próximo" data-icon="arrow-r"></div>
				</div>
			
			</div>
				
<div style="display: none" id="step3">
				
				<div align="center">
					<button id="chooseFile">Selecionar Foto</button>

					<div class="hiddenfile">
						<input type="file" data-clear-btn="false" name="image" accept="image/*">
					</div>
					<div id="preview"></div>
					<ul id="info" data-role="listview" data-inset="true">
					</ul>
					<a href="javascript:uploadPhoto();" data-role="button" data-icon="arrow-u" data-iconpos="top" data-mini="true" data-inline="true">Enviar Foto</a>
					<br><br>
				</div>
				
				<br>
				<div class="ui-grid-step3">
					<div style="width:150px" class="ui-block-a"><input id="step3_bk" type="button" value="Anterior" data-icon="arrow-l"></div>			
					<div style="width:150px" class="ui-block-b"><input id="login-submit" type="submit" value="Registrar" /></div>
					
				</div>
			
			</div>
			</form>
			
		</div>

	</div>


<script>



function validateForm() {
	form = $('#frm-login');
	vDsLogin 			= form.find( 'input[name="dsLogin"]' ).val();
	vDsPassword 		= form.find( 'input[name="dsPassword"]' ).val();
	vDsConfPassword 	= form.find( 'input[name="dsConfPassword"]' ).val();
	vDsName 			= form.find( 'input[name="dsName"]' ).val();
	vDsEmail 			= form.find( 'input[name="dsEmail"]' ).val();
	nuCrsProfile 		= form.find( 'input[name="nuCrsProfile"]' ).val();
	dsSexLog			= form.find( 'input[name="dsSexLog"]' ).val();
	nuType				= form.find( 'select[name="nuType"]' ).val();
	dsName1				= form.find( 'input[name="dsName1"]' ).val();
	nuAge1				= form.find( 'select[name="nuAge1"]' ).val();
	nuGender1			= form.find( 'select[name="nuGender1"]' ).val();
	dsName2				= form.find( 'input[name="dsName2"]' ).val();
	nuAge2				= form.find( 'select[name="nuAge2"]' ).val();
	nuGender2			= form.find( 'select[name="nuGender2"]' ).val();
	vFile				= form.find( 'select[type="file"]' ).val();
	inputImage 			= document.querySelector('input[type=file]'); // see Example 4

	if (vDsLogin == "") {
		changeTab(1);
		msgAlert("Informe um nome de usuário.");
		return false;
	}
	
	if (vDsPassword == "") {
		changeTab(1);
		msgAlert("Informe uma senha");
		return false;
	}	
	
	if (vDsPassword != vDsConfPassword) {
		changeTab(1);
		msgAlert("Informe a mesma senha.");
		return false;
	}		
	
	if (vDsName == "") {
		changeTab(1);
		msgAlert("Informe um apelido.");
		return false;
	}		
	
	if (vDsEmail == "") {
		changeTab(1);
		msgAlert("Informe um email válido.");
		return false;
	}			
	
	if (dsName1 == "") {
		changeTab(2);
		msgAlert("Informe um apelido para o parceiro 1.");
		return false;
	}			
	
	if (nuType == 0 || nuType == 1 || nuType == 3 || nuType == 6) {
		if (dsName2 == "") {
			changeTab(2);
			msgAlert("Informe um apelido para o parceiro 2.");
			return false;
		}	
	}
	
	if (imageSended == false) {
		changeTab(3);
		msgAlert("Envie uma foto para seu perfil.");
		return false;		
	}
	
	return true;
}

/* attach a submit handler to the form */
$("#frm-login").submit(function(event) {

	showLoadingMsg();

	/* stop form from submitting normally */
  event.preventDefault();
 
  /* get some values from elements on the page: */
  var $form = $( this ),
      url = $form.attr( 'action' );
	
	form = $('#frm-login');
	vDsLogin 			= form.find( 'input[name="dsLogin"]' ).val();
	vDsPassword 		= form.find( 'input[name="dsPassword"]' ).val();
	vDsConfPassword 	= form.find( 'input[name="dsConfPassword"]' ).val();
	vDsName 			= form.find( 'input[name="dsName"]' ).val();
	vDsEmail 			= form.find( 'input[name="dsEmail"]' ).val();
	nuCrsProfile 		= form.find( 'input[name="nuCrsProfile"]' ).val();
	dsSexLog			= form.find( 'input[name="dsSexLog"]' ).val();
	nuType				= form.find( 'select[name="nuType"]' ).val();
	dsName1				= form.find( 'input[name="dsName1"]' ).val();
	nuAge1				= form.find( 'select[name="nuAge1"]' ).val();
	nuGender1			= form.find( 'select[name="nuGender1"]' ).val();
	dsName2				= form.find( 'input[name="dsName2"]' ).val();
	nuAge2				= form.find( 'select[name="nuAge2"]' ).val();
	nuGender2			= form.find( 'select[name="nuGender2"]' ).val();	
	inputImage 			= document.querySelector('input[type=file]'); // see Example 4
	file 				= $("input[type=file]")[0].files[0];
	
	
  if (!validateForm()) {
	  hideLoadingMsg();
	  return;
  }
  
  var posting = $.post( url, { 'dsLogin': vDsLogin, 'dsPassword': vDsPassword, 
	  'dsConfPassword': vDsConfPassword, 'dsName': vDsName, 'dsEmail': vDsEmail, 
	  'nuCrsProfile': nuCrsProfile, 'dsSexLog': dsSexLog, 'nuType': nuType, 'dsName1': dsName1,
	  'nuAge1': nuAge1, 'nuGender1': nuGender1, 'dsName2': dsName2, 'nuAge2': nuAge2, 'nuGender2': nuGender2} );
 

  posting.done(function( data ) {
	if (data == "sucess") {
		$.cookie("login", vDsLogin, {expires: new Date(2020, 01, 31, 11, 00, 00)});
		$.cookie("pwd", vDsPassword, {expires: new Date(2020, 01, 31, 11, 00, 00)});
		
		location.href = "register_success.html"
	} else {
		hideLoadingMsg();
		msgAlert(data);
	}
    
  });
  
  
});

function uploadPhoto() {
	
	if (!imageSelected) {
		msgAlert("Seleciona uma imagem para enviar.");
		return;
	}
	showLoadingMsg();
	inputImage 			= document.querySelector('input[type=file]'); // see Example 4
	file 				= $("input[type=file]")[0].files[0];
	var form = new FormData(), xhr = new XMLHttpRequest();
	
		xhr.addEventListener("load", transferComplete, false);
		xhr.addEventListener("error", transferFailed, false);
		xhr.addEventListener("abort", transferCanceled, false);
		
		form.append('inputFile', file);
		xhr.open('post', '/social-mobile-web/uploadimage', true);
		xhr.send(form);

}


function transferComplete(evt) {
	msgAlert("A imagem foi enviada com sucesso.");
	imageSended = true;
	hideLoadingMsg();
}

function transferFailed(evt) {
	msgAlert("Houve um erro no envio da imagem. Tente novamente.");
	imageSended = false;
	hideLoadingMsg();
}

function transferCanceled(evt) {
	msgAlert("Houve um erro no envio da imagem. Tente novamente.");
	imageSended = false;
	hideLoadingMsg();
}

	$('#login-mobile-page').on('pageinit', function() {
		$("#chooseFile").click(function(e) {
			e.preventDefault();
			$("input[type=file]").trigger("click");
		});
		$("input[type=file]").change(function() {
			var file = $("input[type=file]")[0].files[0];
			$("#preview").empty();
			imageSelected = false;

			displayAsImage3(file, "preview");

			$info = $("#info");
			$info.empty();
			if (file && file.name) {
				imageSelected = true;
			}
			$info.listview("refresh");
		});
	});

	function displayAsImage3(file, containerid) {
		if (typeof FileReader !== "undefined") {
			var container = document.getElementById(containerid), img = document
					.createElement("img"), reader;
			container.appendChild(img);
			reader = new FileReader();
			reader.onload = (function(theImg) {
				return function(evt) {
					theImg.src = evt.target.result;
				};
			}(img));
			reader.readAsDataURL(file);
		}
	}
</script>
</body>
</html>
